<style scoped lang="less">
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	// h3{
	// 	margin-left: 50px;
	// 	margin-bottom: 20px;
	// 	margin-top: 20px;
	// }
	.el-table{
		width: 100vh;
	}
	.fomeflex{
		display: flex;
		flex-wrap: wrap;
	}
	.vipscore{
		margin-bottom: 20px;
		display: flex;
		p{
			font-size: 16px;
			// font-weight: 800;
			text-align: center;
			height: 30px;
		}
		.number{
			font-weight: 600;
		}
		div{
			width:200px;
			// border:1px solid red;
		}
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			// padding:0;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 100px;
		text-align: center;
	}
	ul{
		// margin-top: 20px;
		margin-left: 30px;
		list-style: none;
		li{
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}
	img{
		width: 25px;
	}
	.spanRight{
		margin-right: 20px;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <h3 style="margin-bottom: 20px;">会员余额</h3>
			 <el-row style="margin:20px 0 30px 30px;">
			 	<el-col :span="6">
			 		  <el-statistic :value="totalUserTotalMoney" title="余额(元)"/>
			 	</el-col>
			 	<el-col :span="6">
			 		  <el-statistic :value="totalUserCantBe" title="可提现(元)"/>
			 	</el-col>
			 	<el-col :span="6">
			 		  <el-statistic :value="totalUserCanBe" title="不可体现(元)"/>
			 	</el-col>
			 </el-row>
			 <div class="fomeflex">
			 	<el-form-item label="会员信息" label-width="90">
			 		<el-input
					clearable
			 		  style="width: 225px;height: 34px;"
			 		  size="large"
			 		  placeholder="请输入会员编号/昵称手机号"
					  v-model="searchData.userName"
			 		/>
			 	</el-form-item>
			 	
			 	<el-form-item label="账户类型" label-width="90">
			 		<el-select
			 			style="width: 240px"
			 		    v-model="searchData.type"
			 		    clearable
			 		    placeholder="全部"
			 		>
			 		<el-option
			 		      v-for="item in accountyoptions"
			 		      :key="item.value"
			 		      :label="item.accountypename"
			 		      :value="item.value"
			 		/>
			 		</el-select>
			 	</el-form-item>
			 	
			 	<el-form-item label="来源/用途" label-width="90">
			 		<el-select
			 			style="width: 225px"
			 		    v-model="searchData.source"
			 		    clearable
			 		    placeholder="全部"
			 		>			
		
			 		<el-option
			 		      v-for="item in sourceoptions"
			 		      :key="item.value"
			 		      :label="item.sourcename"
			 		      :value="item.value"
			 		/>
			 		</el-select>
			 	</el-form-item>
			 	
			 	<div class="block">
			 		<el-form-item label="创建时间" label-width="90">
			 		<el-date-picker
			 		style="width:220px"
			 		  v-model="timevalue"
			 		  type="datetimerange"
			 		  :shortcuts="shortcuts"
			 		  range-separator="To"
			 		  start-placeholder="开始时间"
			 		  end-placeholder="结束时间"
			 		/>
			 		</el-form-item>
			 	  </div>
			 	<el-button type="primary" @click="search">搜索</el-button>
			 	<el-button plain @click="reset">重置</el-button>
			 </div>
			 <el-table :data="tableData" style="width: 100%" height="47vh">
			 	<el-table-column prop="userAccount" label="会员编号" />
			 	<el-table-column label="会员信息" >
					<template #default="opt">
						<div style="display: flex; align-items: center;">
							<img src="../../public/头像.png" alt="" />
							{{opt.row.userName}}
						</div>
					</template>
				</el-table-column>
			 	<el-table-column prop="userTel" label="手机号码" />
			 	<el-table-column prop="moneyChange" label="变动金额" />
			 	<el-table-column label="剩余金额" >
					<template #default="opt">
						{{opt.row.moneyFinal}}
					</template>
				</el-table-column>
			 	<el-table-column prop="address" label="账户类型" >
					<template #default="opt">
						{{opt.row.accountType}}
					</template>
				</el-table-column>
			 	<el-table-column prop="moneySourceId" label="来源/用途" />
			 	<el-table-column prop="createTime" label="创建时间" />
			 	<el-table-column label="操作"  style="width: 25%;" >
			 		<template #default="opt">
			 			<span class="mya" @click="detail(opt.row)">详情</span>
			 		</template>
			 	</el-table-column>
			 </el-table>
			 <el-pagination
			 	layout="prev,pager,next"
			 	:page-count="total"
			 	:page-size="pageSize"
			 	v-model:current-page="pageIndex"	
			 	@current-change="changePage"
			 ></el-pagination>
			 <!-- 详情对话框 -->
			 <el-dialog v-model="dialogFormVisible" title="余额变动详情" width="400">
			     <el-form style="height: 400px;">
			       <el-form-item >
			 		<ul>
						<li><span class="spanRight">会员头像</span><img src="../../public/头像.png"/></li>
						<li><span class="spanRight">会员编号</span><span>{{detailObj.userAccount}}</span></li>
						<li><span class="spanRight">会员昵称</span><span>{{detailObj.userName}}</span></li>
						<li><span class="spanRight">手机号码</span><span>{{detailObj.userTel}}</span></li>
						<li><span class="spanRight">变动余额</span><span>{{detailObj.moneyChange}}</span></li>
						<li><span class="spanRight">来源/途径</span><span>{{detailObj.moneySourceId}}</span></li>
						<li><span class="spanRight">创建时间</span><span>{{detailObj.createTime}}</span></li>
					</ul>
					
			       </el-form-item>
			     </el-form>
			 	<template #footer>
			 	  <div class="dialog-footer">
			 	    <el-button type="primary" @click="sure">
			 	      确定
			 	    </el-button>
			 	  </div>
			 	</template>
			   </el-dialog>
			 
			 
		 </el-main>
	   </el-container>
	 </div>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { onMounted, ref,reactive } from 'vue'
import {
	VipbalanceList,
	VipbalanceDetail,
	Vipbalancetotal,
	VipbalanceSearch
	} from "@/api"


let pageIndex=ref(1);
let pageSize=6;
let tableData =ref([])
let total=ref(0)
let accountyvalue=ref("")
let accountyoptions=ref([
	{
		accountypename:"余额",
		value:"0"
	},
	{
		accountypename:"可提现余额",
		value:"1"
	},
])
let sourcevalue=ref()
let sourceoptions=ref([
	{
	sourcename:"佣金返现",
	value:0,
	},
	{
	sourcename:"订单消费",
	value:1,
	},
	{
	sourcename:"账户调整",
	value:2,
	}
])
//余额模块上方总余额
const totalUserTotalMoney=ref('')
const totalUserCantBe=ref('')
const totalUserCanBe=ref('')
const getBalancetotal=async ()=>{
	let res = await Vipbalancetotal()
	totalUserTotalMoney.value=res.totalUserTotalMoney
	totalUserCantBe.value=res.totalUserCantBe
	totalUserCanBe.value=res.totalUserCanBe
	// console.log("会员总余额数据",res);
}

//会员余额列表
const getBalanceViplist=async ()=>{
	let res = await VipbalanceSearch({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
	})
	// console.log("会员余额列表",res);
	tableData.value=res.list
	total.value=res.pageCount
	// console.log("11111",tableData.value)
}
//点击详情
const dialogFormVisible=ref(false)
let detailObj=reactive({})
const detail= (row)=>{
	// console.log(row)
	Object.assign(detailObj,row)
	dialogFormVisible.value=true
}
const sure= async()=>{
	dialogFormVisible.value=false
}


const timevalue=ref('')
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  }
]
//分页器
const changePage=(page)=>{
	pageIndex.value=page;
	search()
}

onMounted(()=>{
	getBalanceViplist()
	getBalancetotal()
})
//搜索
let searchData = reactive({
		pageIndex: pageIndex,
		pageSize: pageSize,
		siteId: Number(sessionStorage.getItem("siteId")),
		type: "",
		userName:"",
		startTime: "",
		endTime: '',
		source:""
	})
const search = async () => {
		// console.log("searchData",searchData)
		if(timevalue.value){
			// console.log(timevalue.value)
			let startdata = timevalue.value[0].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let startdataTime = timevalue.value[0].toLocaleString().split(" ")[1]
			let startTime = startdata + " " + startdataTime
			let enddata = timevalue.value[1].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let enddataTime = timevalue.value[1].toLocaleString().split(" ")[1]
			let endtTime = enddata + " " + enddataTime
			searchData.startTime = startTime
			searchData.endTime = endtTime
		}
		let data = {}
		for( let key in (searchData)){
			if(searchData[key]){
				data[key] = searchData[key]
			}
		}
		
		let res=await VipbalanceSearch(data)
		 // console.log("data",data);
		 // console.log("搜索",res)
		tableData.value=res.list
		total.value=res.pageCount
		// console.log(tableData.value)
		
	}
	// 重置
	const reset = () =>{
		searchData.userName="";
		searchData.type="";
		searchData.source="";
		searchData.userName=''
		searchData.startTime=''
		timevalue.value="";
		getBalanceViplist()
	}
</script>
